<template>
  <div class="container">
    <div class="container-title">
      <span>美团外卖</span>
      <span>猫眼电影</span>
      <span>美团酒店</span>
      <span>民宿/公寓</span>
      <span>商家入驻</span>
      <span>美团公益</span>
    </div>
    <Carousel 
      :autoplay="setting.autoplay"
      :autoplay-speed="setting.autoplaySpeed"
    >
      <Carousel-item>
        <div class="demo-carousel">
          <img style="width: 100%; height: 100%;" src="http://p0.meituan.net/codeman/daa73310c9e57454dc97f0146640fd9f69772.jpg">
        </div>
      </Carousel-item>
      <Carousel-item>
        <div class="demo-carousel">
          <img style="width: 100%; height: 100%;" src="http://p1.meituan.net/codeman/826a5ed09dab49af658c34624d75491861404.jpg">
        </div>
      </Carousel-item>
      <Carousel-item>
        <div class="demo-carousel">
          <img style="width: 100%; height: 100%;" src="http://p0.meituan.net/codeman/a97baf515235f4c5a2b1323a741e577185048.jpg">
        </div>
      </Carousel-item>
      <Carousel-item>
        <div class="demo-carousel">
          <img style="width: 100%; height: 100%;" src="http://p0.meituan.net/codeman/33ff80dc00f832d697f3e20fc030799560495.jpg">
        </div>
      </Carousel-item>
      <Carousel-item>
        <div class="demo-carousel">
          <img style="width: 100%; height: 100%;" src="https://p1.meituan.net/travelcube/01d2ab1efac6e2b7adcfcdf57b8cb5481085686.png">
        </div>
      </Carousel-item>
    </Carousel>
    <div class="container-life"></div>
    <div v-show="!username" class="container-avatar">
      <img src="//s0.meituan.net/bs/fe-web-meituan/e350c4a/img/avatar.jpg">
      <span>
        Hi! 你好
      </span>
      <div @click="register" class="button">注册</div>
      <div @click="login" class="button">立即登录</div>
    </div>
    <div v-show="username" class="container-information">
      <i class="iconfont iconfonts">&#xe654;</i>
      <img src="https://img.meituan.net/avatar/4522ab928b29cfb682b602ab231aab4f7837.jpg">
      <span>{{username}}</span>
      <div class="iconfont-container">
        <i class="iconfont">&#xe66e;</i>
        <i class="iconfont">&#xe622;</i>
        <i class="iconfont">&#xe6ac;</i>
        <i class="iconfont top">&#xe62a;</i>
        <i class="iconfont top">&#xe7ac;</i>
      </div>
    </div>
    <div class="hotel"></div>
    <div class="picture"></div>
    <div class="boss"></div>
    <div class="upload-container">
      <img src="//s1.meituan.net/bs/fe-web-meituan/60ac9a0/img/download-qr.png">
      <span>美团APP手机版</span>
      <div class="play">
        <span>一元起</span>
        <span>吃喝玩乐</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Exhibition',
  data() {
    return {
      setting: {
        autoplay: true,
        autoplaySpeed: 5000,
      }
    }
  },
  computed: {
    ...mapState(['username'])
  },
  methods: {
    /** 注册 */
    register() {
      this.$router.push('/register')
    },
    /** 立即去登录 */
    login() {
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="scss" scoped>
.container /deep/ .ivu-carousel {
  width: 550px;
  height: 240px;
  margin-left: 10px;
}
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
  margin: 10px;
  &-title {
    margin: 29px auto;
    display: flex;
    justify-content: center;
    width: 600px;
    position: absolute;
    justify-content: space-between;
    z-index: 100;
    top: -80px;
    left: 65px;
    span {
      color: #222;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      &:nth-child(1):hover {
        color: #fbc700;
      }
      &:nth-child(2):hover {
        color: #ed1e24;
      }
      &:nth-child(3):hover {
        color: #f04d4e;
      }
      &:nth-child(4):hover {
        color: #FDC411;
      }
      &:nth-child(5):hover {
        color: #FE8C00;
      }
      &:nth-child(6):hover {
        color: #f04d4e;
      }
    }
  }
  &-life {
    width: 150px;
    height: 240px;
    margin-left: 10px;
    margin-right: 10px;
    background-size: 150px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-color: #fff;
    background-image: url(http://p0.meituan.net/codeman/e473bb428f070321269b23370ff02ba956209.jpg);
  }
  &-avatar {
    width: 220px;
    height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    img {
      width: 55px;
      height: 55px;
      margin-top: 30px;
      border-radius: 50%;
      border: 4px solid #E5E5E5;
    }
    span {
      color: #222;
      margin-top: 10px;
      font-size: 17px;
    }
    .button {
      width: 118px;
      text-align: center;
      background: #fff;
      border: 1px solid #e5e5e5;
      border-radius: 40px;
      font-size: 14px;
      color: #333;
      transition: background-color 0.5s;
      display: block;
      line-height: 38px;
      cursor: pointer;
      margin-top: 10px;
      &:hover {
        background-color: #f6f6f6;
        transition: background-color 0.5s;
      }
    }
  }
  &-information {
    @extend .container-avatar;
    position: relative;
    .iconfonts {
      position: absolute;
      top: 1px;
      right: 10px;
      font-size: 18px;
      cursor: pointer;
      color: #666;
    }
    span {
      font-size: 16px;
      color: #222;
      text-align: center;
      font-weight: 500;
      white-space: nowrap;
      width: 6em;
      margin-top: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .iconfont-container {
      display: flex;
      flex-wrap: wrap;
      width: 80%;
      margin: 0 auto;
      padding-left: 32px;
      padding-top: 20px;
      .iconfont {
        font-size: 22px;
        color: #FFC300;
        margin-right: 20px;
      }
      .top {
        margin-top: 10px;
      }
    }
  }
  .hotel {
    width: 270px;
    margin-left: 10px;
    height: 165px;
    background-size: 270px;
    background-position: 50%;
    background-repeat: no-repeat;
    margin-top: 10px;
    margin-right: 10px;
    background-image: url(http://p1.meituan.net/codeman/8cce56c467a17e04f3094d1e455462a0132772.png);
  }
  .picture {
    @extend .hotel;
    margin-left: 0;
    background-image: url(http://p1.meituan.net/codeman/16442c19da1f1c4544f794e29d99c92051716.jpg);
  }
  .boss {
    width: 150px;
    height: 165px;
    margin-top: 10px;
    margin-right: 10px;
    background-size: 150px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-color: #fff;
    background-image: url(http://p1.meituan.net/codeman/5b21cddb4bb1cbc3a9c3bce0f726c75940469.jpg);
  }
  .upload-container {
    width: 220px;
    height: 164px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    img {
      width: 95px;
      height: 95px;
      margin-top: 10px;
    }
    span {
      font-size: 16px;
      color: #222222;
      font-weight: 500;
    }
    .play {
      margin-top: 5px;
      display: flex;
      span {
        font-size: 12px;
        &:nth-child(1) {
          color: #EC5330;
          margin-right: 5px;
        }
        &:nth-child(2) {
          color: #3f3f3f;
        }
      }
    }
  }
}
</style>